<template>
	<view class="addvisitor-container">
		
		<view class="visitor-form">
				<u-calendar :show="calenderShow" @close="closeCalender" @confirm="getCalender"></u-calendar>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
				
				</u-col>
		
				<u-col span="10">
					<u--form labelPosition="left" :model="visitor" :rules="rules" ref="formVisitor"
						:errorType="errorType">
						<u-form-item prop="visitorName" borderBottom ref="visitorName">
							<u--input v-model="visitor.visitorName" border="none" clearable placeholder="请输入访客姓名"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
							></u--input>
						</u-form-item>
						
						
						<u-form-item prop="phoneNumber" borderBottom ref="phoneNumber">
							<u--input v-model="visitor.phoneNumber" border="none" clearable placeholder="请输入被访客手机号"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
							></u--input>
						</u-form-item>
						
						
						<u-form-item prop="intervieweeName" borderBottom ref="intervieweeName">
							<u--input v-model="visitor.intervieweeName" border="none" clearable placeholder="请输入被访客人的姓名"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
							></u--input>
						</u-form-item>
						
						
						<u-form-item prop="intervieweePhoneNumber" borderBottom ref="intervieweePhoneNumber">
							<u--input v-model="visitor.intervieweePhoneNumber" border="none" clearable placeholder="请输入被访客人的手机号"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
							></u--input>
						</u-form-item>
						
						
						
						<u-form-item prop="appointmentName" borderBottom ref="appointmentName">
							<u--input v-model="visitor.appointmentName" border="none" clearable placeholder="预约时间"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399" @focus="openCalender()"
							></u--input>
						</u-form-item>
						
						
						
						<u-form-item prop="visitorIdNumber" borderBottom ref="visitorIdNumber">
							<u--input v-model="visitor.visitorIdNumber" border="none" clearable placeholder="请输入访客身份证号"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
							></u--input>
						</u-form-item>
						
						
						
						<u-form-item prop="peer" borderBottom ref="peer">
							<u--input v-model="visitor.peer" border="none" clearable placeholder="请输入同行人"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
							></u--input>
						</u-form-item>
						
						
						<u-form-item prop="vehicleInformation" borderBottom ref="vehicleInformation">
							<u--input v-model="visitor.vehicleInformation" border="none" clearable placeholder="请输入车牌号"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
							></u--input>
						</u-form-item>
						
						
						
		
					</u--form>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
		
				<u-col span="10">
					<u-button type="primary" text="预约" @click="deal"></u-button>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				calenderShow:false,
				visitor:{
					visitorName:'',
					phoneNumber:'',
					intervieweeName:'',
					intervieweePhoneNumber:'',
					appointmentName:'',
					visitorIdNumber:'',
					peer:'',
					vehicleInformation:''
				},
				rules: {
					'visitorName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'phoneNumber': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'intervieweeName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'intervieweePhoneNumber': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'appointmentName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'visitorIdNumber': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'peer': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'vehicleInformation': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					
				},
				errorType: 'border-bottom',  // 错误提示类型:下划线
			}
		},
		methods: {
			deal(){
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/visitToday',
					method: 'POST',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					data: this.visitor,
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								uni.$u.toast('预约成功')
								uni.navigateBack()
								// uni.$emit('onVisitor',{msg:'触发预约事件，页面更新',code:200})
								uni.$emit('onVisitor',this.visitor)
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
			openCalender(){
				this.calenderShow=true
			},
			closeCalender(){
				this.calenderShow=false
			},
			getCalender(e){
				console.log('e',e)
				this.visitor.appointmentName = e[0]
				this.closeCalender()
			}
		}
	}
</script>

<style>

</style>
